<template>
    <div>
        <h3>设备管理数据中心</h3>
        <el-date-picker class="choice-date" v-model="choice_date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <div class="content">
            <div class="table-block">
                <h5>塔吊数据分析</h5>
                <div class="table">
                    <el-table :header-cell-style="getRowClass" stripe :data="table_1" style="width: 100%">
                        <el-table-column label="编号" property="index"></el-table-column>
                        <el-table-column label="设备类型" property="type"></el-table-column>
                        <el-table-column label="上次检查时间" property="last"></el-table-column>
                        <el-table-column label="下次检查时间" property="next"></el-table-column>
                        <el-table-column label="碰撞提醒" property="collide"></el-table-column>
                        <el-table-column label="超载预警" property="warning"></el-table-column>
                        <el-table-column label="限位提醒" property="limit"></el-table-column>
                        <el-table-column label="限行区域提醒" property="limit_area"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table-block">
                <h5>施工电梯数据分析</h5>
                <div class="table">
                    <el-table :header-cell-style="getRowClass" stripe :data="table_2" style="width: 100%">
                        <el-table-column label="编号" property="index"></el-table-column>
                        <el-table-column label="设备类型" property="type"></el-table-column>
                        <el-table-column label="上次检查时间" property="last"></el-table-column>
                        <el-table-column label="下次检查时间" property="next"></el-table-column>
                        <el-table-column label="超载预警" property="warning"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'table-equipment',
    methods: {
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9";
            }
        }
    },
    data() {
        return {
            choice_date: ["2018-10-01", "2018-10-12"],
            table_1: [
                {
                    index: '1#塔吊',
                    type: '塔吊',
                    last: '2018年09月01日',
                    next: '2018年10月05日',
                    collide: 2,
                    warning: 1,
                    limit: 1,
                    limit_area: 1
                }, {
                    index: '2#塔吊',
                    type: '塔吊',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    collide: 2,
                    warning: 1,
                    limit: 1,
                    limit_area: 1
                }, {
                    index: '1#塔吊',
                    type: '塔吊',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    collide: 2,
                    warning: 1,
                    limit: 1,
                    limit_area: 1
                }, {
                    index: '1#塔吊',
                    type: '塔吊',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    collide: 2,
                    warning: 1,
                    limit: 1,
                    limit_area: 1
                }, {
                    index: '1#塔吊',
                    type: '塔吊',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    collide: 2,
                    warning: 1,
                    limit: 1,
                    limit_area: 1
                }
            ],
            table_2: [
                {
                    index: '1#电梯',
                    type: '施工电梯',
                    last: '2018年09月01日',
                    next: '2018年10月05日',
                    warning: 1
                },
                {
                    index: '2#电梯',
                    type: '施工电梯',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    warning: 1
                },
                {
                    index: '3#电梯',
                    type: '施工电梯',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    warning: 1
                },
                {
                    index: '4#电梯',
                    type: '施工电梯',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    warning: 1
                },
                {
                    index: '5#电梯',
                    type: '施工电梯',
                    last: '2018年11月10日',
                    next: '2018年11月10日',
                    warning: 1
                }
            ]
        }
    }
}
</script>

<style scoped>
@import "../../assets/css/data.css";
</style>

